/* ============================================================
   Silversplints / We Design Portal — Shared List Design System
   Matches the Create Order / Edit Order / Return multistep form.

   Targets Power Pages' DEFAULT Studio List markup (.entitylist,
   .table, .form-control, .btn, .pagination), so it applies to
   EVERY standard List on the portal once added — no per-view work.

   WHERE TO ADD:
   Styling workspace > select your active theme > "..." > Manage CSS
   > Upload (or Edit code on the existing file). Stored as a Web File,
   applies site-wide to every .entitylist automatically.
   Priority: beats theme.css, but NOT portalbasictheme.css — anything
   that needs to win against that has to go in JS instead (see the
   companion dwe-list-filter-layout.js).
   ============================================================ */

:root {
  --ss-green: #6ab651;
  --ss-green-dark: #5a9e43;
  --ss-green-text: #2e7d32;
  --ss-green-bg: #eef5ec;
  --ss-green-bg-soft: #f7f9f7;
  --ss-green-border: #d4e8d0;
  --ss-border: #e0e0e0;
  --ss-text-muted: #555;
  --ss-white: #fff;
  --ss-error: #e81123;
  --ss-error-bg: #fff5f5;
  --ss-radius: 6px;
  --ss-radius-sm: 4px;
}

/* ── List wrapper ── */
.entitylist {
  background: var(--ss-white);
  border: 1px solid var(--ss-green-border);
  border-radius: var(--ss-radius);
  padding: 16px;
}

/* ── Filters (Status / Specialist dropdowns) ── */
.entitylist label {
  font-size: 0.8em;
  font-weight: bold;
  color: var(--ss-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.entitylist select.form-control,
.entitylist input.form-control,
.entitylist .form-control {
  border: 1px solid var(--ss-green-border);
  border-radius: var(--ss-radius-sm);
  font-size: 0.9em;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}

.entitylist .form-control:focus {
  border-color: var(--ss-green);
  box-shadow: 0 0 0 3px rgba(106, 182, 81, 0.15);
  outline: none;
}

/* Search box + its button */
.entitylist .input-group .form-control {
  border-right: none;
}

.entitylist .input-group-btn .btn,
.entitylist button[type="submit"],
.entitylist .btn-primary {
  background-color: var(--ss-green);
  border: 1px solid var(--ss-green-dark);
  color: var(--ss-white);
  border-radius: var(--ss-radius-sm);
  font-size: 0.85em;
  padding: 6px 16px;
}

.entitylist .btn-primary:hover,
.entitylist .input-group-btn .btn:hover,
.entitylist button[type="submit"]:hover {
  background-color: var(--ss-green-dark);
  border-color: var(--ss-green-dark);
}

/* ── Table container ── */
.entitylist .table-responsive {
  border: 1px solid var(--ss-green-border);
  border-radius: var(--ss-radius);
  overflow: hidden;
  margin-top: 12px;
}

.entitylist table.table {
  margin-bottom: 0;
}

/* Header row — matches the sticky measurement-col-headers block */
.entitylist table.table thead th {
  background: var(--ss-green-bg);
  border-bottom: 1px solid var(--ss-green-border) !important;
  color: var(--ss-text-muted);
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Body rows — matches the .measurement-card soft-green card look */
.entitylist table.table tbody tr {
  background: var(--ss-green-bg-soft);
  transition: background .15s;
}

.entitylist table.table tbody tr:nth-child(even) {
  background: var(--ss-white);
}

.entitylist table.table tbody tr:hover {
  background: var(--ss-green-bg);
}

.entitylist table.table td {
  border-top: 1px solid var(--ss-green-border);
  padding: 10px 12px;
  font-size: 0.9em;
  vertical-align: middle;
}

/* First column (order number) — styled like the product name in the form */
.entitylist table.table tbody tr td:first-child {
  font-weight: bold;
  color: var(--ss-green-text);
}

/* ── Row action buttons (Edit order / Approve / Create return / View details) ── */
.entitylist table.table td .btn {
  display: block;
  width: 100%;
  border-radius: var(--ss-radius-sm);
  font-size: 0.82em;
  padding: 5px 10px;
  margin-bottom: 4px;
  text-align: center;
  white-space: nowrap;
}

.entitylist table.table td .btn:last-child {
  margin-bottom: 0;
}

/* Primary status action: solid green (Edit order / Approve / Create return) */
.entitylist table.table td .btn-primary,
.entitylist table.table td .btn-success {
  background-color: var(--ss-green);
  border: 1px solid var(--ss-green-dark);
  color: var(--ss-white);
}

.entitylist table.table td .btn-primary:hover,
.entitylist table.table td .btn-success:hover {
  background-color: var(--ss-green-dark);
}

/* Secondary action: View details — outlined so it doesn't compete visually */
.entitylist table.table td .btn-default,
.entitylist table.table td .btn-info {
  background-color: var(--ss-white);
  border: 1px solid var(--ss-green-border);
  color: var(--ss-green-text);
}

.entitylist table.table td .btn-default:hover,
.entitylist table.table td .btn-info:hover {
  background-color: var(--ss-green-bg);
  border-color: var(--ss-green);
}

/* ── Filters panel layout (Status / Specialist / Search inline) ──
   NOTE: intentionally NOT handled here. portalbasictheme.css loads
   after any custom CSS with its own !important rules on this
   structure, so no stylesheet — including this one — can win.
   Layout is handled in JS instead: see dwe-list-filter-layout.js
   (inline style.setProperty(..., 'important') beats it).
   This file still owns the filter's colors/typography above. */

/* ── Row action menu ──
   Power Pages Lists render row actions as a Bootstrap dropdown
   (.dropdown.action > .dropdown-menu > li > a.details-link),
   NOT plain .btn elements — even when your site config forces
   the menu permanently open instead of collapsed behind "...". */

.entitylist td[aria-label="action menu"] {
  min-width: 160px;
}

/* Hide the "..." toggle button — menu is already forced open */
.entitylist .dropdown.action > .btn.btn-default.btn-xs {
  display: none;
}

.entitylist .dropdown.action .dropdown-menu {
  position: static !important;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  float: none;
  box-shadow: none;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  min-width: 0;
}

.entitylist .dropdown.action .dropdown-menu > li {
  display: block;
}

.entitylist .dropdown.action .details-link {
  display: block;
  text-align: center;
  background-color: var(--ss-green);
  border: 1px solid var(--ss-green-dark);
  color: var(--ss-white) !important;
  border-radius: var(--ss-radius-sm);
  font-size: 0.82em;
  padding: 5px 10px;
  text-decoration: none;
  white-space: nowrap;
}

.entitylist .dropdown.action .details-link:hover,
.entitylist .dropdown.action .details-link:focus {
  background-color: var(--ss-green-dark);
  color: var(--ss-white) !important;
  text-decoration: none;
}

/* ── Pagination ── */
.entitylist .pagination > li > a,
.entitylist .pagination > li > span {
  color: var(--ss-green-text);
  border-color: var(--ss-green-border);
}

.entitylist .pagination > li.active > a,
.entitylist .pagination > li.active > span {
  background-color: var(--ss-green);
  border-color: var(--ss-green-dark);
  color: var(--ss-white);
}

.entitylist .pagination > li > a:hover {
  background-color: var(--ss-green-bg);
  border-color: var(--ss-green-border);
}